<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="utf-8">
    <!-- <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> -->
    <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>用户登录</title>
    <link rel="stylesheet" href="../font-awesome/css/font-awesome.css">
    <link rel="stylesheet" href="../css/button.css">
    <link rel="stylesheet" href="../css/tailwind.min.css">
    <link rel="stylesheet" href="../layui/css/layui.css" media="all">
    <link rel="stylesheet" href="../css/all.css">
</head>

<body class="min-h-screen bg-gray-100 text-gray-900 flex justify-center dowebok">
    <div class="max-w-screen-xl m-0 sm:m-20 bg-white shadow sm:rounded-lg flex justify-center flex-1">
        <div class="lg:w-1/2 xl:w-5/12 p-6 sm:p-12">
            <div class="mt-12 flex flex-col items-center">
                <h1 class="text-2xl xl:text-3xl font-extrabold">用户登录</h1>
                <div class="w-full flex-1 mt-8">

                    <div class="mx-auto max-w-xs">
                        <input
                            class="w-full px-4 py-4 pr-16 rounded-lg font-medium bg-gray-100 border border-gray-200 placeholder-gray-500 text-sm focus:outline-none focus:border-gray-400 focus:bg-white"
                            type="email" placeholder="账号/手机号/邮箱" id="username" /><br>
                        <!-- 很神奇的一个 <br> 解决部分机型左右滚动-->
                        <div class="input-item mt-5">
                            <input
                                class="w-full px-4 py-4 rounded-lg font-medium bg-gray-100 border border-gray-200 placeholder-gray-500 text-sm focus:outline-none focus:border-gray-400 focus:bg-white"
                                type="password" placeholder="登录密码" id="password" />
                            <!-- <i class="fa fa-eye" aria-hidden="true"></i> -->
                            <i class="fa fa-eye-slash" aria-hidden="true" data-show="0"></i>
                        </div>
                        <button
                            class="button-animation mt-5  text-sm tracking-wide font-semibold text-gray-100 w-full py-4 rounded-lg ease-in-out flex items-center justify-center focus:outline-none"
                            id="login"><span>登 录</span>
                        </button>
                        <p class="mt-6 py-4 text-sm text-gray-600 text-center hover:bg-gray-200 rounded-lg"
                            id="register">立即注册</p>
                    </div>


                    <div class="my-10 border-b text-center">
                        <div
                            class="leading-none px-2 inline-block text-sm text-gray-600 tracking-wide font-medium bg-white transform translate-y-1/2">
                            其他关联登录</div>
                    </div>

                    <div class="flex flex-col items-center">
                        <button
                            class="w-full max-w-xs font-bold shadow-sm rounded-lg py-3 bg-indigo-100 text-gray-800 flex items-center justify-center ease-in-out focus:outline-none hover:shadow focus:shadow-sm focus:shadow-outline">
                            <div class="weixin"></div>
                            <span class="ml-4">使用微信登录</span>
                        </button>
                        <button
                            class="w-full max-w-xs font-bold shadow-sm rounded-lg py-3 bg-indigo-100 text-gray-800 flex items-center justify-center ease-in-out focus:outline-none hover:shadow focus:shadow-sm focus:shadow-outline mt-5">
                            <div class="weibo"></div>
                            <span class="ml-4">使用微博登录</span>
                        </button>
                    </div>
                </div>
            </div>
        </div>
        <div class="flex-1 bg-indigo-100 text-center hidden lg:flex">
            <div class="m-12 xl:m-16 w-full bg-contain bg-center bg-no-repeat"
                style="background-image: url('../images/dowebok.svg');"></div>
        </div>
    </div>
    <script src="../js/isIE.js"></script>
    <!-- 存储cookie -->
    <script src="../js/cookie.js"></script>
    <!-- 判断 PC mobile -->
    <script src="../js/browser.js"></script>
    <!-- 封装自定义弹层 -->
    <script src="../js/myLayer.js"></script>
    <!-- layui 框架 -->
    <script src="../layui/layui.all.js"></script>
    <!-- 当前页面需求文档 -->
    <script src="../js/document.js"></script>
    <!-- 当前页 逻辑 -->
    <script src="../js/login.js"></script>
</body>

</html>